<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    body{
      font: 18px "Microsoft YaHei UI";
      margin: 0;
      background-color: #fafafa;
    }

    #top_left>i{
      margin: 11px 0 0 20px;
      color: #fafafa;

    }
      #top_left>a{
        display: block;
        text-decoration: none;
        color: #fafafa;
        float: left;
        margin: 10px 5px 0 5px;
        font-size: 15px;
      }
      .el-menu-demo{
        float: left;
      }
      #top_right{
        display: inline-block;
        margin-left: 300px;
      }
      #top_right>a{
        display: block;
        text-decoration: none;
        color: #fafafa;
        float: left;
        margin: 10px 10px 0 5px;
        font-size: 15px;
      }
      #t_log{

      }

        #main_top{
            display: block;
        }
      #main_top>a{
          display: block;
          text-decoration: none;
          color: black;
          font-size: 5px;
          float: left;
          margin-right: 5px;
      }
      #main_top :hover{
          color: #0AA1ED;
      }
      #main_top>a>el-button{
          height: 12px;
      }
    .el-button--primary {
        font-size: 12px;
        line-height: 12px;
    }
    #main_top>a>.el-button{

        height: 15px;
        padding: 3px;
    }

  </style>
</head>
<body>
<div id="app">
<el-container>
  <el-header style="padding: 0">
    <div style="width: 1920px;height:155px;
    margin: 0 auto;background-image: url('bg.png')">
        <span id="top_left" style="margin-left: 50px">
          <i class="el-icon-orange" style="float: left"></i>
        <a href="" >主站</a>
        <a href="">番剧</a>
        <a href="">游戏中心</a>
        <a href="">直播</a>
        <a href="">会员购</a>
        <a href="">漫画</a>
        <a href="">赛事</a>
          <i class="el-icon-mobile-phone" style="float: left"></i>

        <a href="">下载APP</a>

          <el-menu style="width: 300px;margin: 0 auto"
                                     default-active="1"
                                     class="el-menu-demo"
                                     mode="horizontal"
                                     @select="handleSelect"
                                     background-color="rgba(0,0,0,0)"
                                     text-color="#fff"
                                     active-text-color="fff">
      <el-menu-item>

        <el-input size="mini" v-model="wd" placeholder="请输入关键字搜索"></el-input>
      </el-menu-item>
        <el-button style="background-color: rgba(0,0,0,0);border: 0;position:relative;top:13px;right: 70px;" icon="el-icon-search" ></el-button>
      </el-menu>
          </span>

      <span id="top_right">
          <el-button icon="el-icon-search" circle></el-button>
          <el-button style="background-color: #fb7299">登录</el-button>
          <a href="" >大会员</a>
        <a href="">消息</a>
        <a href="">动态</a>
        <a href="">收藏</a>
        <a href="">历史记录</a>
        <a href="">创作中心</a>
          <el-button style="background-color: #fb7299">投稿</el-button>

      </span>
        <div id="t_log">
            <img src="t_log.png" alt="">
        </div>
    </div>
  </el-header>

  <el-main style="width: 1200px;margin: 100px auto 0 auto">
        <div id="main_i">
            <span style="float: left">
                <i class="el-icon-discount"><br>首页</i>
                <i class="el-icon-discount"><br>动态</i>
                <i class="el-icon-discount"><br>热门</i>
                <i class="el-icon-discount"><br>频道</i>
                <el-divider direction="vertical"></el-divider>
            </span>
            <span style="height: 100px" id="main_top">
                <a href="">动画   <el-button type="primary">999+</el-button></a>
                <a href="">音乐   <el-button type="primary">999+</el-button></a>
                <a href="">舞蹈   <el-button type="primary">999+</el-button></a>
                <a href="">知识   <el-button type="primary">999+</el-button></a>
                <a href="">生活   <el-button type="primary">999+</el-button></a>
                <a href="">时尚   <el-button type="primary">999+</el-button></a>
                <a href="">娱乐   <el-button type="primary">999+</el-button></a>
                <a href="">放映厅  <el-button type="primary">999+</el-button></a>
                <el-divider direction="vertical"></el-divider>
                <br>
                <a href="">番剧   <el-button type="primary">999+</el-button></a>
                <a href="">国创   <el-button type="primary">999+</el-button></a>
                <a href="">游戏   <el-button type="primary">999+</el-button></a>
                <a href="">科技   <el-button type="primary">999+</el-button></a>
                <a href="">鬼畜   <el-button type="primary">999+</el-button></a>
                <a href="">资讯   <el-button type="primary">999+</el-button></a>

                <a href="">影视   <el-button type="primary">999+</el-button></a>
           <el-dropdown>
                <a class="el-dropdown-link" style="font-size: 5px;line-height: 5px;margin-bottom: 3px;float: left">
    更多<i class="el-icon-arrow-down el-icon--right"></i>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu></a>
</el-dropdown>
                <el-divider direction="vertical"></el-divider>
                <el-divider direction="vertical"></el-divider>



            <div style="background-color: red;width: 22px;height: 22px;float: right">

            </div>
            </span>
            <el-row gutter="10">
                <el-col span="10">
                    <div style="width: 459px;height: 202px" class="block">
                        <el-carousel trigger="click" height="150px">
                            <el-carousel-item v-for="item in arr" :key="item">
                                <img :src="item" style="width: 100%;height: 100%" alt="">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </el-col>
                <el-col span="14">
                    <el-carousel :interval="4000" type="card" height="200px">
                        <el-carousel-item v-for="item in arr1" :key="item">
                            <img :src="item" style="width: 100%;height: 100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>

        </div>
  </el-main>

  <el-footer>
      <div style="background-color: #3f3f3f;padding: 30px;
      text-align: center;color: #b1b1b1;font-size: 14px">
          <p>营业执照 信息网络传播视听节目许可证：0910417 网络文化经营许可证 沪网文【2019】3804-274号 广播电视节目制作经营许可证：（沪）字第01248号</p>
      <p>增值电信业务经营许可证 沪B2-20100043 互联网ICP备案：沪ICP备13002172号-3 出版物经营许可证 沪批字第U6699 号</p>
      <p>互联网药品信息服务资格证 沪-非经营性-2016-0143 营业性演出许可证 沪市文演（经）00-2253</p>
      <p>不良信息举报邮箱：help@bilibili.com | 涉未成年举报邮箱：teenprotect@bilibili.com | 不良信息举报电话：4006262233转1</p>
      <p>上海互联网举报中心 | 12318全国文化市场举报网站 | 沪公网安备31011002002436号 | 儿童色情信息举报专区 | 扫黄打非举报</p>
      <p>网上有害信息举报专区：中国互联网违法和不良信息举报中心</p>
      <p>亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</p>
      <p>公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888</p>
      </div>
  </el-footer>
</el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
      wd:"",
      arr:["card/1.png","card/2.jpg","card/3.jpg","card/4.png","card/5.jpg",],
          arr1:["../d.jpg","../e.jpg","../f.jpg","../g.jpg","../a.jpg","../b.jpg"],
      }

    },methods:{
      handleSelect(){
      }
    }

  })
</script>
</html>
